import Vue from 'vue'

Vue.directive('sticky', {
	inserted(el, binding) {
		const params = binding.value || {}
		const stickyTop = params.stickyTop || 0
		const zIndex = params.zIndex || 1000
		const elStyle = el.style

		elStyle.position = '-webkit-sticky'
		elStyle.position = 'sticky'
		// if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
		// if (~elStyle.position.indexOf('sticky')) {
		//     elStyle.top = `${stickyTop}px`;
		//     elStyle.zIndex = zIndex;
		//     return
		// }
		const elHeight = el.getBoundingClientRect().height
		const elWidth = el.getBoundingClientRect().width
		elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`

		const parentElm = el.parentNode || document.documentElement
		const placeholder = document.createElement('div')
		placeholder.style.display = 'none'
		placeholder.style.width = `${elWidth}px`
		placeholder.style.height = `${elHeight}px`
		parentElm.insertBefore(placeholder, el)

		let active = false

		const getScroll = (target, top) => {
			const prop = top ? 'pageYOffset' : 'pageXOffset'
			const method = top ? 'scrollTop' : 'scrollLeft'
			let ret = target[prop]
			if (typeof ret !== 'number') {
				ret = window.document.documentElement[method]
			}
			return ret
		}

		const sticky = () => {
			if (active) {
				return
			}
			if (!elStyle.height) {
				elStyle.height = `${el.offsetHeight}px`
			}

			elStyle.position = 'fixed'
			elStyle.width = `${elWidth}px`
			placeholder.style.display = 'inline-block'
			active = true
		}

		const reset = () => {
			if (!active) {
				return
			}

			elStyle.position = ''
			placeholder.style.display = 'none'
			active = false
		}

		const check = () => {
			const scrollTop = getScroll(window, true)
			const offsetTop = el.getBoundingClientRect().top
			if (offsetTop < stickyTop) {
				sticky()
			} else {
				if (scrollTop < elHeight + stickyTop) {
					reset()
				}
			}
		}
		listenAction = () => {
			check()
		}

		window.addEventListener('scroll', listenAction)
	},

	unbind() {
		window.removeEventListener('scroll', listenAction)
	}
})